<template>
	<div>
		<HEADER></HEADER>
		<div class="container">
			<div class="columns">
				<div class="mine-columns">

					<div class="card pageHead">
						<h1>
							{{name}} - {{item}}
						</h1>
					</div>
					<div class="artcList">
						<div class="arrList" v-for="(item,index) in dataList" :key="index">
							<div class="year">{{item.year}}</div>
							<div class="item" v-for="(item,index) in item.data" :key="index" @click="goToArticle(item.Id)">
								<div class="data">{{item.date}}</div>
								<div class="name">{{item.name}}</div>
							</div>							
						</div>
					</div>

				</div>
				<LeftView @buttClassfy="buttClassfy" @buttLable="buttLable"></LeftView>
				<RighthView @buttArticle="buttArticle" @buttArchive="buttArchive"></RighthView>
			</div>
		</div>
		<Gotop></Gotop><FOOTER></FOOTER>
	</div>
</template>

<script>
	import {} from '../assets/font/iconfont.js'
	import HEADER from '../components/header.vue'
	import FOOTER from '../components/footer.vue'
	import LeftView from '../components/leftView.vue'
	import RighthView from '../components/righthView.vue'
	import Gotop from '../components/gotop.vue'
	export default {
		name: 'ArrayItem',
		data() {
			return {
				name: '',
				item: '',
				classfy: '',
				lable: '',
				achive: '',
				arr:[],
				dataList:[],
			}
		},
		created() { 
			this.arr = this.$route.query.arr
			if(this.arr.archive){
				this.name = this.arr.name
				this.item = this.arr.archive
				this.archive = this.arr.archive
			}
			if(this.arr.clafy){
				this.name = this.arr.name
				this.item = this.arr.clafy
				this.clafy = this.arr.clafy
			}
			if(this.arr.lable){
				this.name = this.arr.name
				this.item = this.arr.lable
				this.lable = this.arr.lable
			}
		},
		mounted() {
			if(this.archive){		// 归档
				this.whereData(this.archive);
			}
			if(this.clafy){		// 分类
				this.whereClassify(this.clafy)
			}
			if(this.lable){		// 标签
				this.whereLabel(this.lable)
			}
		},
		methods: {
			// 数据请求
			whereClassify(e){
				this.$axios.post(this.HOST + '/api/inquClassify',{
					classify: e
				}).then(res => {
					let data = res.data.data;
					for (const i in data) {
						data[i].year = data[i].datetime.slice(0,4);
						data[i].date = data[i].datetime.slice(0,10);
					}
					// console.log(data, ' whereClassify ');
					this.dataProces(data);
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			whereLabel(e){
				this.$axios.post(this.HOST + '/api/inquLabel',{
					lable: e
				}).then(res => {
					let data = res.data.data;
					for (const i in data) {
						data[i].year = data[i].datetime.slice(0,4);
						data[i].date = data[i].datetime.slice(0,10);
					}
					// console.log(data, ' whereLabel ');
					this.dataProces(data);
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			whereData(e){
				// console.log(e,'whereData')
				this.$axios.post(this.HOST + '/api/inquArchive',{
					date: e
				}).then(res => {
					let data = res.data.data;
					for (const i in data) {
						data[i].year = data[i].datetime.slice(0,4);
						data[i].date = data[i].datetime.slice(0,10);
					}
					// console.log(data, ' whereClassify ');
					this.dataProces(data);
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			// 数据处理
			dataProces(e){
				// console.log(e,' eeeeeeeeeeee ');
				let map = {};
				this.dataList = [];
				for (let i=0; i<e.length;i++) {
					if (!map[e[i].year]) {
						this.dataList.push({
							year: e[i].year,
							data: [e[i]]
						});
						map[e[i].year] = e[i]
					} else {
						for (let j = 0; j < this.dataList.length; j++) {
							if (e[i].year === this.dataList[j].year) {
								this.dataList[j].data.push(e[i]);
								break
							}
						}
					}
				}
				// console.log(this.dataList,"this.dataList")
			},
			// 跳转文章详情
			goToArticle(e){
				this.$router.push({
					path:'/Article',
					query:{ArtID:e}
				})
			},
			// 分类
			buttClassfy(e){
				this.name = e.name; 
				this.item = e.clafy;
				this.whereClassify(e.clafy);
			},
			// 标签
			buttLable(e){
				this.name = e.name;
				this.item = e.lable;
				this.whereLabel(e.lable);
			},
			// 归档
			buttArchive(e){
				this.name = e.name;
				this.item = e.archive;
				this.whereData(e.archive);
			},
			// 最近文章
			buttArticle(e){
				this.$router.push({
					path:'/Article',
					query:{ArtID:e.ArtID}
				})
			},
		},
		components: {
			HEADER: HEADER,
			FOOTER: FOOTER,
			LeftView: LeftView,
			RighthView: RighthView,
			Gotop: Gotop
		}
	}
</script>

<style>
@import url("../assets/css/style.css");
</style>
